window.addEventListener('load', function () {
    //1.当鼠标经过时显示左右箭头，离开时消失
    //获取元素
    var next = document.querySelector('.next');
    var prev = document.querySelector('.prev');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;//图片的宽度
    //鼠标经过focus
    focus.addEventListener('mouseenter', function () {
        next.style.display = 'block';
        prev.style.display = 'block';
        clearInterval(timer);
        timer = null;//清除定时器后让timer为空
    });
    // 鼠标离开focus
    focus.addEventListener('mouseleave', function () {
        next.style.display = 'none';
        prev.style.display = 'none';
        timer = setInterval(function () {
            //手动调用事件
            next.click();
        }, 2000);//这里鼠标离开重启定时器只需要把下面写好的定时器函数拿过来就行
    });
    //2.动态生成小圆点，有几张图就生成几个小圆点
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for (var i = 0; i < ul.children.length - 1; i++) {
        //创建元素li
        var li = document.createElement('li');
        //通过自定义属性记录li 的索引号
        li.setAttribute('index', i);
        //把li插入ol中
        ol.appendChild(li);
        //3.利用排他思想让点击的小圆点变白色，干点其他小圆点的背景颜色
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                //干掉其他人
                ol.children[i].className = '';
            }
            //留下自己
            this.className = 'current';
            //4.点击小圆圈移动图片(移动ul)
            //ul移动距离为小圆圈的索引号 乘以图片的宽度 注意移动的距离是负值
            //当点击某个li(小圆点),就得到当前li的索引号
            var index = this.getAttribute('index');
            //当点击小圆圈后，把小圆圈的索引号给num，修复点击小圆圈后点击next或prev按钮画面不一致bug
            num = index;
            //当点击小圆圈后，把小圆圈的索引号给circle，修复点击小圆圈后点击next或prev按钮画面不一致bug
            circle = index;
            animate(ul, -index * focusWidth);
        });
    }
    //ol下的第一个孩子类名为current(背景变白)
    ol.children[0].className = 'current';
    //5.点击箭头移动图片
    var num = 0;
    var circle = 0;//单独声明一个变量用于控制小圆圈
    //右侧按钮
    next.addEventListener('click', function () {

        //如果num 大于图片数量，就让ul的left值等于0
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusWidth);
        //6.点击按钮，小圆圈跟随一起变化
        //点击一次让circle加1
        circle++;
        //如果circle等于ol.children.length,说明走到最后了，就让circle等于0，让它复原
        if (circle == ol.children.length) {
            circle = 0;
        }
        //用排他思想控制小圆点的背景颜色
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';

    });

    //左侧按钮
    prev.addEventListener('click', function () {
        //如果num 等于0,说明走到第一张
        if (num == 0) {
            ul.style.left = -num * focusWidth + 'px';//这里还不是很明白
            num = ul.children.length - 1;
        }
        num--;
        animate(ul, -num * focusWidth);
        //6.点击按钮，小圆圈跟随一起变化(做法：单独声明一个变量控制小圆圈)
        //点击一次让circle加1
        circle--;
        //如果circle小于0，说明图片要走到最后已张，就让小圆点跳到最后一个
        if (circle < 0) {
            circle = ol.children.length - 1;//因为计算机第一个是从 0 开始，所以要减一
        }
        //用排他思想控制小圆点的背景颜色
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    });
    //7.轮播图自动播放(定时器)
    //利用手动调用点击事件，自动调用右侧按钮函数即可实现
    var timer = setInterval(function () {
        //手动调用事件
        next.click();
    }, 2000);

    //8. 侧边栏返回顶部模块
    var sidebar = document.querySelector('.sidebar');
    var backTop = document.querySelector('.backTop');
    var floor = document.querySelector('.floor');
    var main = document.querySelector('.main');
    var mainTop = main.offsetTop;//mainTop是轮播图部分距离页面顶部的距离
    var sideTop = sidebar.offsetTop;//sideTop是侧边栏到页面顶部的距离
    var floorTop = floor.offsetTop;//floorTop是家用电器等模块距离页面顶部的距离
    //sliderTop是侧边栏到main顶部的距离
    var sliderTop = sideTop - mainTop;
    document.addEventListener('scroll', function () {
        //window.pageYOffset 是整个页面滚动的距离
        if (window.pageYOffset >= mainTop) {
            sidebar.style.position = 'fixed';
            sidebar.style.top = sliderTop + 'px';
        } else if (window.pageYOffset <= mainTop) {
            sidebar.style.position = 'absolute';
            sidebar.style.top = '350px';
        }
        if (window.pageYOffset >= floorTop) {
            backTop.style.display = 'block';
        } else {
            backTop.style.display = 'none';
        }

    })
    backTop.addEventListener('click', function () {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    })
})